<!--从业者-在线学习-名师直播 -->
<template>
  <view class="live-list-container">
    <!-- 直播列表 -->
    <view class="live-list" v-for="(TList,index) in publicLiveList">
      <!-- 直播项1 - 付费 -->
      <view class="live-item" @click="navigateToLiveDetail(TList.bczb_code)">
        <view class="live-time">{{TList.bczb_starttime}} 开播</view>
        <u-image 
          :src="TList.bczb_banner[0].url" 
          width="100%" 
          height="300rpx" 
          radius="8"
          mode="aspectFill"
        ></u-image>
        <view class="live-banner-tip">点击直播跳转到详情页</view>
        
        <view class="live-info">
          <view class="live-title-row">
            <text class="live-title">{{TList.bczb_name}}</text>
            <view class="live-price">
              <text>¥{{TList.bczb_price}}</text>
              <u-icon name="arrow-right" size="16" color="#999"></u-icon>
            </view>
          </view>
						<text class="live-teacher">讲师：{{changeTList(TList.bctzb_list)}}</text>          
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      liveList: [
        {
          id: 1,
          time: '5/28 00:00 开播',
          banner: '/static/live-banner.jpg',
          title: '直播名称',
          price: 10.8,
          teacher: '姓名 | 职称',
          isFree: false
        },
        {
          id: 2,
          time: '5/28 00:00 开播',
          banner: '/static/live-banner2.jpg',
          title: '直播名称',
          price: 0,
          teacher: '姓名 | 职称',
          isFree: true
        }
      ],
			// 讲师列表
			teacherList:[]
    }
  },
	computed: {
		publicLiveList() {
			return this.liveList.filter(item => item.bczb_publishstate === 1)
		}
	},
	onShow() {
		this.getTeacherList()
		// 获取直播列表
		// this.getTeacherLive()
		// 新的直播列表
		this.selectLiveOnline()
		
	},
  methods: {
		selectLiveOnline() {
			this.$u.api.queryzblist({
				"usercode": uni.getStorageSync('usercode')
			}).then(res => {
				// console.log('newlive:', res)
				let baseinfo = res.data.base_info
				this.liveList = []
				for(let i=0; i<baseinfo.length; i++) {
					this.liveList.push(baseinfo[i].zbinfo)
				}
				console.log('newlive-1:', this.liveList)
			})
		},
		
		getTeacherLive() {
			this.$u.api.querycbzblist({
				
			}).then(res => {
				console.log('teacherlist:',res)
				this.liveList = res.data.base_info
				
				
			})
		},		
		// 讲师列表
		getTeacherList() {
			this.$u.api.querybtlist().then(res => {
				console.log('讲师列表：', res)
				this.teacherList = res.data.base_info
				
			})
		},
		
		// 匹配讲师姓名与职称
		changeTList(listcode) {
			
			const bctzbArray = []
			// 当判断是字符串时，直接转为数组  
			if (!Array.isArray(bctzbArray)) {
				bctzbArray = JSON.parse(listcode);
			} 		
			
			const result = bctzbArray.map(bctzbId => {
			  const matchedTeacher = this.teacherList.find(teacher => teacher.bt_code === bctzbId);				
			  return matchedTeacher ? `${matchedTeacher.bt_name} | ${matchedTeacher.bt_zhicheng}` : null;
			}).filter(item => item !== null);
			// 将数组转为字符串 
			return result.join('、')
		},
		
    navigateToLiveDetail(id) {
      uni.navigateTo({
        // url: `/pages/live/detail?id=${id}`
				url: `/pages/Practitioner/teacherLive/liveDetails?zbcode=${id}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.live-list-container {
  padding: 20rpx;
  background-color: #f5f7fa;
}

.live-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.live-item {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  &:active {
    opacity: 0.9;
  }
}

.live-time {
  padding: 16rpx 20rpx;
  font-size: 24rpx;
  color: #666;
  background-color: #f8f8f8;
}

.live-banner-tip {
  padding: 10rpx 20rpx;
  font-size: 22rpx;
  color: #999;
  text-align: center;
  background-color: #f8f8f8;
}

.live-info {
  padding: 20rpx;
  
  .live-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;
    
    .live-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
    
    .live-price {
      display: flex;
      align-items: center;
      
      text {
        font-size: 28rpx;
        color: #f56c6c;
        font-weight: bold;
        margin-right: 8rpx;
      }
    }
    
    .live-view {
      display: flex;
      align-items: center;
      
      text {
        font-size: 26rpx;
        color: #2979ff;
        margin-right: 8rpx;
      }
    }
  }
  
  .live-teacher {
    font-size: 24rpx;
    color: #666;
  }
}
</style>